<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garmin 活动详情</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'garmin-primary': '#007cc3',
            'garmin-secondary': '#00b2a9',
            'garmin-dark': '#1a2e3b',
            'garmin-card': '#f8fafc'
          }
        }
      }
    }
  </script>
  <style>
    .garmin-gradient {
      background: linear-gradient(135deg, #007cc3 0%, #00b2a9 100%);
    }
    .stat-card {
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }
    .split-badge {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 500;
    }
    #map {
      height: 400px;
      border-radius: 12px;
      z-index: 1;
    }
    .leaflet-control-attribution {
      font-size: 10px;
    }
  </style>
</head>
<body class="bg-gray-50 font-sans">
  <div id="app" class="min-h-screen">
    <!-- 顶部导航 -->
    <header class="garmin-gradient text-white shadow-lg">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center">
          <i class="fas fa-running text-2xl mr-3"></i>
          <h1 class="text-xl font-bold">Garmin Connect</h1>
        </div>
        <div class="hidden md:block">
          <span class="text-sm">2025年6月18日</span>
        </div>
        <button class="bg-white text-garmin-primary px-4 py-2 rounded-full font-medium">
          <i class="fas fa-share-alt mr-2"></i>分享
        </button>
      </div>
    </header>

    <!-- 活动概览 -->
    <section class="container mx-auto px-4 py-6">
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
          <div>
            <h2 class="text-2xl font-bold text-garmin-dark mb-2">{{ activity.activityName }}</h2>
            <p class="text-gray-600 mb-4 max-w-3xl">{{ activity.description }}</p>
            
            <div class="flex flex-wrap gap-2 mb-4">
              <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
                <i class="fas fa-map-marker-alt mr-1"></i> {{ activity.locationName }}
              </span>
              <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
                <i class="fas fa-shoe-prints mr-1"></i> {{ formatNumber(activity.summaryDTO.steps) }} 步
              </span>
              <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">
                <i class="fas fa-fire mr-1"></i> {{ formatNumber(activity.summaryDTO.calories) }} 卡路里
              </span>
            </div>
          </div>
          
          <div class="bg-garmin-card p-4 rounded-lg w-full md:w-auto">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <p class="text-gray-500 text-sm">开始时间</p>
                <p class="font-semibold">{{ formatDateTime(activity.summaryDTO.startTimeLocal) }}</p>
              </div>
              <div>
                <p class="text-gray-500 text-sm">持续时间</p>
                <p class="font-semibold">{{ formatDuration(activity.summaryDTO.duration) }}</p>
              </div>
              <div>
                <p class="text-gray-500 text-sm">距离</p>
                <p class="font-semibold">{{ formatDistance(activity.summaryDTO.distance) }} 公里</p>
              </div>
              <div>
                <p class="text-gray-500 text-sm">配速</p>
                <p class="font-semibold">{{ formatPace(activity.summaryDTO.averageSpeed) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 地图部分 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6 relative">
        <h3 class="text-xl font-bold text-garmin-dark mb-4">运动轨迹</h3>
        <div id="map" class="mb-4" style="display: none"></div>
        <div v-if="!mapLoaded" class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
          <div class="text-center">
            <i class="fas fa-map text-4xl text-gray-400 mb-3"></i>
            <p class="text-gray-500">正在加载地图数据...</p>
          </div>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div class="text-center">
            <p class="text-gray-500 text-sm">起点海拔</p>
            <p class="font-semibold">{{ formatNumber(activity.summaryDTO.minElevation) }} 米</p>
          </div>
          <div class="text-center">
            <p class="text-gray-500 text-sm">最高海拔</p>
            <p class="font-semibold">{{ formatNumber(activity.summaryDTO.maxElevation) }} 米</p>
          </div>
          <div class="text-center">
            <p class="text-gray-500 text-sm">累计爬升</p>
            <p class="font-semibold">{{ formatNumber(activity.summaryDTO.elevationGain) }} 米</p>
          </div>
          <div class="text-center">
            <p class="text-gray-500 text-sm">累计下降</p>
            <p class="font-semibold">{{ formatNumber(activity.summaryDTO.elevationLoss) }} 米</p>
          </div>
        </div>
      </div>

      <!-- 关键指标卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-6">
        <StatCard 
          title="心率" 
          :value="formatNumber(activity.summaryDTO.averageHR)" 
          unit="bpm"
          :maxValue="activity.summaryDTO.maxHR"
          icon="heart"
          color="red"
        />
        
        <StatCard 
          title="步频" 
          :value="formatNumber(Math.round(activity.summaryDTO.averageRunCadence))" 
          unit="spm"
          :maxValue="activity.summaryDTO.maxRunCadence"
          icon="shoe-prints"
          color="blue"
        />
        
        <StatCard 
          title="步幅" 
          :value="formatNumber(activity.summaryDTO.strideLength, 2)" 
          unit="厘米"
          icon="ruler"
          color="green"
        />
        
        <StatCard 
          title="训练效果" 
          :value="formatNumber(activity.summaryDTO.trainingEffect, 1)" 
          :maxValue="5"
          :showMax="true"
          icon="battery-full"
          color="purple"
        />
      </div>

      <!-- 高级指标 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 class="text-xl font-bold text-garmin-dark mb-4">跑步动态</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="text-center">
            <div class="text-3xl font-bold text-garmin-primary mb-2">
              {{ formatNumber(activity.summaryDTO.groundContactTime, 1) }} <span class="text-lg">ms</span>
            </div>
            <p class="text-gray-600">触地时间</p>
            <div class="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div 
                class="h-full bg-garmin-secondary rounded-full" 
                :style="{ width: calculatePercentage(activity.summaryDTO.groundContactTime, 200, 300) + '%' }"
              ></div>
            </div>
            <p class="text-xs text-gray-500 mt-1">
              {{ getContactTimeFeedback(activity.summaryDTO.groundContactTime) }}
            </p>
          </div>
          
          <div class="text-center">
            <div class="text-3xl font-bold text-garmin-primary mb-2">
              {{ formatNumber(activity.summaryDTO.verticalOscillation, 1) }} <span class="text-lg">cm</span>
            </div>
            <p class="text-gray-600">垂直振幅</p>
            <div class="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div 
                class="h-full bg-garmin-secondary rounded-full" 
                :style="{ width: calculatePercentage(activity.summaryDTO.verticalOscillation, 6, 13) + '%' }"
              ></div>
            </div>
            <p class="text-xs text-gray-500 mt-1">
              {{ getOscillationFeedback(activity.summaryDTO.verticalOscillation) }}
            </p>
          </div>
          
          <div class="text-center">
            <div class="text-3xl font-bold text-garmin-primary mb-2">
              {{ formatNumber(activity.summaryDTO.verticalRatio, 1) }} <span class="text-lg">%</span>
            </div>
            <p class="text-gray-600">垂直比率</p>
            <div class="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div 
                class="h-full bg-garmin-secondary rounded-full" 
                :style="{ width: calculatePercentage(activity.summaryDTO.verticalRatio, 7, 10) + '%' }"
              ></div>
            </div>
            <p class="text-xs text-gray-500 mt-1">
              目标范围: 7-10%
            </p>
          </div>
        </div>
      </div>

      <!-- 分段数据 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 class="text-xl font-bold text-garmin-dark mb-4">分段数据</h3>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">距离 (km)</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">持续时间</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">配速</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">心率</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">步频</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="(split, index) in filteredSplits" :key="index" class="hover:bg-gray-50">
                <td class="px-4 py-3 whitespace-nowrap">
                  <span :class="getSplitBadgeClass(split.splitType)" class="split-badge">
                    {{ getSplitType(split.splitType) }}
                  </span>
                </td>
                <td class="px-4 py-3 whitespace-nowrap">
                  {{ split.distance ? formatDistance(split.distance) : '-' }}
                </td>
                <td class="px-4 py-3 whitespace-nowrap">
                  {{ split.duration ? formatDuration(split.duration) : '-' }}
                </td>
                <td class="px-4 py-3 whitespace-nowrap">
                  {{ split.averageSpeed ? formatPace(split.averageSpeed) : '-' }}
                </td>
                <td class="px-4 py-3 whitespace-nowrap">
                  {{ split.averageHR ? formatNumber(split.averageHR) : '-' }}
                </td>
                <td class="px-4 py-3 whitespace-nowrap">
                  {{ split.averageRunCadence ? formatNumber(Math.round(split.averageRunCadence)) : '-' }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 训练效果 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-6">
        <div class="bg-white rounded-xl shadow-md p-6">
          <h3 class="text-xl font-bold text-garmin-dark mb-4">训练效果</h3>
          <div class="flex items-center">
            <div class="mr-4">
              <div class="relative">
                <div class="w-24 h-24 rounded-full flex items-center justify-center bg-blue-50">
                  <span class="text-3xl font-bold text-garmin-primary">{{ formatNumber(activity.summaryDTO.trainingEffect, 1) }}</span>
                </div>
                <div class="absolute inset-0 border-4 border-blue-200 border-t-garmin-primary rounded-full animate-spin" style="animation-duration: 3s"></div>
              </div>
            </div>
            <div>
              <p class="font-semibold text-garmin-dark">{{ activity.summaryDTO.aerobicTrainingEffectMessage.split('_').join(' ') }}</p>
              <p class="text-gray-600 mt-2">{{ getTrainingEffectDescription(activity.summaryDTO.trainingEffect) }}</p>
              <div class="mt-3 flex items-center">
                <div class="w-full bg-gray-200 rounded-full h-2.5">
                  <div 
                    class="bg-garmin-primary h-2.5 rounded-full" 
                    :style="{ width: (activity.summaryDTO.trainingEffect / 5 * 100) + '%' }"
                  ></div>
                </div>
                <span class="ml-2 text-sm text-gray-500">0-5</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-md p-6">
          <h3 class="text-xl font-bold text-garmin-dark mb-4">身体状态</h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between mb-1">
                <span class="text-gray-600">身体电量变化</span>
                <span class="font-semibold" :class="activity.summaryDTO.differenceBodyBattery < 0 ? 'text-red-500' : 'text-green-500'">
                  {{ formatNumber(activity.summaryDTO.differenceBodyBattery) }}
                </span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div 
                  class="h-2.5 rounded-full" 
                  :class="activity.summaryDTO.differenceBodyBattery < 0 ? 'bg-red-500' : 'bg-green-500'"
                  :style="{ width: Math.min(Math.abs(activity.summaryDTO.differenceBodyBattery) * 2, 100) + '%' }"
                ></div>
              </div>
            </div>
            
            <div>
              <div class="flex justify-between mb-1">
                <span class="text-gray-600">恢复心率</span>
                <span class="font-semibold text-blue-500">{{ formatNumber(activity.summaryDTO.recoveryHeartRate) }} bpm</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div 
                  class="h-2.5 rounded-full bg-blue-500" 
                  :style="{ width: (100 - (activity.summaryDTO.recoveryHeartRate / 100 * 100)) + '%' }"
                ></div>
              </div>
            </div>
            
            <div>
              <div class="flex justify-between mb-1">
                <span class="text-gray-600">训练负荷</span>
                <span class="font-semibold text-purple-500">{{ formatNumber(Math.round(activity.summaryDTO.activityTrainingLoad)) }}</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div 
                  class="h-2.5 rounded-full bg-purple-500" 
                  :style="{ width: Math.min(activity.summaryDTO.activityTrainingLoad / 2, 100) + '%' }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-garmin-dark text-white py-6 mt-8">
      <div class="container mx-auto px-4 text-center">
        <p>© 2025 Garmin Connect 活动分析 | 第三方数据展示</p>
        <p class="text-gray-400 text-sm mt-2">数据更新时间: {{ formatDate(activity.metadataDTO.lastUpdateDate) }}</p>
      </div>
    </footer>
  </div>

  <script>
    const { createApp, ref, computed, onMounted } = Vue;
    
    // 自定义统计卡片组件
    const StatCard = {
      props: {
        title: String,
        value: [Number, String],
        unit: {
          type: String,
          default: ''
        },
        maxValue: Number,
        icon: String,
        color: String,
        showMax: Boolean
      },
      template: `
        <div class="stat-card bg-white rounded-xl p-5">
          <div class="flex items-start justify-between">
            <div>
              <p class="text-gray-500 text-sm mb-1">{{ title }}</p>
              <div class="flex items-baseline">
                <span class="text-3xl font-bold" :class="'text-' + color + '-600'">{{ value }}</span>
                <span v-if="unit" class="text-gray-500 ml-1">{{ unit }}</span>
              </div>
            </div>
            <div :class="'bg-' + color + '-100 text-' + color + '-600'" class="p-3 rounded-full">
              <i :class="'fas fa-' + icon" class="text-lg"></i>
            </div>
          </div>
          
          <div v-if="maxValue !== undefined" class="mt-3">
            <div class="flex justify-between text-xs text-gray-500 mb-1">
              <span>当前值</span>
              <span v-if="showMax">最大值 {{ maxValue }}</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div 
                :class="'bg-' + color + '-500'" 
                class="h-2 rounded-full" 
                :style="{ width: Math.min((value / maxValue) * 100, 100) + '%' }"
              ></div>
            </div>
          </div>
        </div>
      `
    };
    
    createApp({
      components: { StatCard },
      setup() {
        const mapLoaded = ref(false);
        const map = ref(null);
        
        // 活动数据
        const activity = ref({
          activityId: 488488251,
          activityName: "孙河453/130 48.5 21° 78% 1 1.5",
          description: "这次训练的感觉比较累，白天也比较累，不知道是咖啡截断反应还是什么情况。坚持下来。恢复率3.3。",
          locationName: "朝阳区",
          metadataDTO: {
            lastUpdateDate: "2025-06-18T11:31:41.0"
          },
          summaryDTO: {
            startTimeLocal: "2025-06-16T20:25:37.0",
            distance: 11009.79,
            duration: 3229.598,
            calories: 659,
            steps: 8658,
            averageHR: 130,
            maxHR: 142,
            averageRunCadence: 160.703125,
            maxRunCadence: 172,
            strideLength: 124.280004882813,
            groundContactTime: 246.800003051758,
            verticalOscillation: 11.6300003051758,
            trainingEffect: 3.40000009536743,
            verticalRatio: 9.25,
            recoveryHeartRate: 44,
            activityTrainingLoad: 120.714431762695,
            differenceBodyBattery: -11,
            aerobicTrainingEffectMessage: "IMPROVING_AEROBIC_BASE_8",
            minElevation: 22,
            maxElevation: 33.4,
            elevationGain: 15,
            elevationLoss: 27,
            startLatitude: 40.0449371896684,
            startLongitude: 116.517395479605,
            endLatitude: 40.0537940114737,
            endLongitude: 116.526186335832
          },
          splitSummaries: [
            {
              distance: 11009.78,
              duration: 3229.598,
              averageSpeed: 3.40899991989136,
              averageHR: 130,
              averageRunCadence: 160.6875,
              splitType: "INTERVAL_ACTIVE"
            },
            {
              duration: 0.499,
              splitType: "RWD_STAND"
            },
            {
              distance: 10898.43,
              duration: 3179.647,
              averageSpeed: 3.42799997329712,
              averageHR: 130,
              averageRunCadence: 161.6875,
              splitType: "RWD_RUN"
            },
            {
              distance: 111.36,
              duration: 49.371,
              averageSpeed: 2.25600004196167,
              averageHR: 116,
              averageRunCadence: 100.921875,
              splitType: "RWD_WALK"
            }
          ]
        });
        
        // 过滤有效的分段数据
        const filteredSplits = computed(() => {
          return activity.value.splitSummaries.filter(split => 
            split.distance > 0 && split.duration > 1
          );
        });
        
        // 初始化地图
        const initMap = () => {
          document.getElementById('map').style.display = 'block';
          if (!activity.value.summaryDTO.startLatitude || !activity.value.summaryDTO.startLongitude) {
            console.warn("缺少地图所需的位置数据");
            return;
          }
          
          // 创建地图实例
          map.value = L.map('map').setView(
            [activity.value.summaryDTO.startLatitude, activity.value.summaryDTO.startLongitude], 
            13
          );
          
          // 添加地图图层
          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          }).addTo(map.value);
          
          // 添加起点和终点标记
          L.marker([activity.value.summaryDTO.startLatitude, activity.value.summaryDTO.startLongitude])
            .addTo(map.value)
            .bindPopup('起点')
            .openPopup();
          
          L.marker([activity.value.summaryDTO.endLatitude, activity.value.summaryDTO.endLongitude])
            .addTo(map.value)
            .bindPopup('终点');
            
          // 添加轨迹线（简化版，实际应用中需要完整轨迹数据）
          const points = [
            [activity.value.summaryDTO.startLatitude, activity.value.summaryDTO.startLongitude],
            [activity.value.summaryDTO.endLatitude, activity.value.summaryDTO.endLongitude]
          ];
          
          L.polyline(points, {
            color: '#007cc3',
            weight: 5,
            opacity: 0.7
          }).addTo(map.value);
          
          mapLoaded.value = true;
        };
        
        // 格式化数字（保留小数位）
        const formatNumber = (value, decimals = 2) => {
          if (value === null || value === undefined) return '-';
          return Number(value).toFixed(decimals);
        };
        
        // 格式化日期时间
        const formatDateTime = (dateStr) => {
          if (!dateStr) return '';
          const date = new Date(dateStr.replace('T', ' ').replace(/\.\d+$/, ''));
          return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          });
        };
        
        // 格式化日期
        const formatDate = (dateStr) => {
          if (!dateStr) return '';
          const date = new Date(dateStr.replace('T', ' ').replace(/\.\d+$/, ''));
          return date.toLocaleDateString('zh-CN');
        };
        
        // 格式化距离（米转公里）
        const formatDistance = (meters) => {
          if (!meters) return '0.00';
          return (meters / 1000).toFixed(2);
        };
        
        // 格式化持续时间
        const formatDuration = (seconds) => {
          if (!seconds) return '00:00';
          const hrs = Math.floor(seconds / 3600);
          const mins = Math.floor((seconds % 3600) / 60);
          const secs = Math.floor(seconds % 60);
          return `${hrs > 0 ? hrs + ':' : ''}${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        };
        
        // 格式化配速
        const formatPace = (speed) => {
          if (!speed || speed === 0) return '0:00';
          const paceSecondsPerKm = 1000 / speed;
          const minutes = Math.floor(paceSecondsPerKm / 60);
          const seconds = Math.floor(paceSecondsPerKm % 60);
          return `${minutes}:${seconds.toString().padStart(2, '0')}`;
        };
        
        // 计算百分比
        const calculatePercentage = (value, min, max) => {
          return Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));
        };
        
        // 获取分段类型
        const getSplitType = (type) => {
          const types = {
            'INTERVAL_ACTIVE': '活动',
            'RWD_STAND': '站立',
            'RWD_RUN': '跑步',
            'RWD_WALK': '步行'
          };
          return types[type] || type;
        };
        
        // 获取分段徽章类
        const getSplitBadgeClass = (type) => {
          const classes = {
            'INTERVAL_ACTIVE': 'bg-blue-100 text-blue-800',
            'RWD_STAND': 'bg-gray-100 text-gray-800',
            'RWD_RUN': 'bg-green-100 text-green-800',
            'RWD_WALK': 'bg-yellow-100 text-yellow-800'
          };
          return classes[type] || 'bg-gray-100 text-gray-800';
        };
        
        // 触地时间反馈
        const getContactTimeFeedback = (time) => {
          if (time < 220) return '优秀 (少于220ms)';
          if (time < 250) return '良好 (220-250ms)';
          return '待改进 (大于250ms)';
        };
        
        // 垂直振幅反馈
        const getOscillationFeedback = (osc) => {
          if (osc < 9) return '优秀 (少于9cm)';
          if (osc < 11) return '良好 (9-11cm)';
          return '待改进 (大于11cm)';
        };
        
        // 训练效果描述
        const getTrainingEffectDescription = (effect) => {
          if (effect < 1) return '恢复训练';
          if (effect < 2) return '轻度训练';
          if (effect < 3) return '维持训练';
          if (effect < 4) return '提升训练';
          if (effect < 5) return '高强度训练';
          return '极限训练';
        };
        
        // 组件挂载后初始化地图
        onMounted(() => {
          setTimeout(initMap, 500); // 模拟地图数据加载延迟
        });
        
        return {
          activity,
          filteredSplits,
          mapLoaded,
          formatNumber,
          formatDateTime,
          formatDate,
          formatDistance,
          formatDuration,
          formatPace,
          calculatePercentage,
          getSplitType,
          getSplitBadgeClass,
          getContactTimeFeedback,
          getOscillationFeedback,
          getTrainingEffectDescription
        };
      }
    }).mount('#app');
  </script>
</body>
</html>